<template>
  <div class="user-info">
    <h2>用户信息</h2>
    <div class="info-item">
      <span class="label">姓名：</span>
      <span class="value">{{ name }}</span>
    </div>
    <div class="info-item">
      <span class="label">年龄：</span>
      <span class="value">{{ age }}</span>
    </div>
    <div class="info-item">
      <span class="label">性别：</span>
      <span class="value">{{ gender === 'male' ? '男' : '女' }}</span>
    </div>
    <div class="info-item">
      <span class="label">邮箱：</span>
      <span class="value">{{ email }}</span>
    </div>
    <div class="info-item">
      <span class="label">职业：</span>
      <span class="value">{{ profession }}</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineProps } from 'vue';

// 定义props并进行验证
const props = defineProps({
  // 姓名：必传，字符串类型
  name: {
    type: String,
    required: true,
    // 自定义验证函数
    validator: (value: string) => {
      return value.length >= 2 && value.length <= 10;
    }
  },
  // 年龄：数字类型，默认20，范围18-120
  age: {
    type: Number,
    default: 20,
    validator: (value: number) => {
      return value >= 18 && value <= 120;
    }
  },
  // 性别：字符串类型，只能是'male'或'female'
  gender: {
    type: String,
    required: true,
    validator: (value: string) => {
      return ['male', 'female'].includes(value);
    }
  },
  // 邮箱：字符串类型，必传
  email: {
    type: String,
    required: true,
    validator: (value: string) => {
      // 简单的邮箱格式验证
      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
      return emailRegex.test(value);
    }
  },
  // 职业：字符串类型，默认'未知'
  profession: {
    type: String,
    default: '未知'
  }
});
</script>

<style scoped>
.user-info {
  max-width: 600px;
  margin: 20px auto;
  padding: 20px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.user-info h2 {
  color: #333;
  border-bottom: 1px solid #e0e0e0;
  padding-bottom: 10px;
  margin-top: 0;
}

.info-item {
  display: flex;
  margin: 12px 0;
}

.label {
  width: 80px;
  color: #666;
  font-weight: 500;
}

.value {
  flex: 1;
  color: #333;
}
</style>
